var aLi = document.querySelectorAll("li");
var aP = document.querySelectorAll("p");
var count = 0;

for (var i = 0; i < aLi.length; i++) {
  aLi[i].index = i;
  aLi[i].onclick = function () {
    count++;
    aP[this.index].style.zIndex = count;
    if (this.index == 0) {
      bgColor();
      aLi[this.index].style.backgroundColor = "#F56C6C";
    }

    if (this.index == 1) {
      bgColor();
      aLi[this.index].style.backgroundColor = "#67C23A";
    }

    if (this.index == 2) {
      bgColor();
      aLi[this.index].style.backgroundColor = "#409EFF";
    }

    if (this.index == 3) {
      bgColor();
      aLi[this.index].style.backgroundColor = "#E6A23C";
    }
  }
}

function bgColor() {
  for (var i = 0; i < aLi.length; i++) {
    aLi[i].style.backgroundColor = "black";
  }
}